<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="app"></div>

        <h1>hello world</h1>

        <img src="" alt="" />

        <img
            src="https://i.pinimg.com/originals/1f/00/27/1f0027a3a80f470bcfa5de596507f9f4.png"
            alt="加载不出来的时候，显示这个提示信息"
        />

        <h3>12232</h3>
    </body>
    <script>
        // loadedImgAsync(
        //     "https://i.pinimg.com/originals/8d/f2/96/8df29610829a2c32d22cfd5458e9f46c.png",
        //     loadSuccess
        // );

        loadedImgPromise(
            "https://i.pinimg.com/originals/8d/f2/96/8df29610829a2c32d22cfd5458e9f46c.png"
        ).then((img) => {
            document.getElementById("app").appendChild(img);
        });

        function loadSuccess(img) {
            console.log("图片加载成功了");
            // 把图片添加到 DOM 上
            document.getElementById("app").appendChild(img);
        }

        function loadedImgAsync(url, callback) {
            // 创建图片对象
            let img = document.createElement("img");

            // 加载图片
            img.src = url;

            // 监听事件
            img.onload = () => {
                callback(img);
            };
        }

        function loadedImgPromise(url) {
            return new Promise((resolve, reject) => {
                // 创建一个图片标签对象
                const img = document.createElement("img");
                // 加载图片
                img.src = url;
                // 这就是异步
                img.onload = () => {
                    resolve(img);
                };
            });
        }

        const arr = [1, 2, 3, 4, 5];

        const arr1 = arr.slice(2);

        console.log("arr1", arr1);

        // ruptArr(arr);

        console.log("arr", arr);

        function ruptArr(arr) {
            return arr.sort((a, b) => (Math.random() > 0.3 ? 1 : -1));
        }
    </script>
</html>
